<template>
    <Row v-if="JSON.parse(data.stepDetail).type === 'DATABASE' || data.type === 'DATABASE'"
        :gutter="24" class="expand-box">
        <Col :span="12">
        <Row :gutter="24">
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>SQL语句</span>
            </div>
            <Card>
                <div class="detail-card3">
                    <JsonFormate v-model="data.sqlText"> </JsonFormate>
                </div>
            </Card>
            </Col>
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>错误信息</span>
            </div>
            <Card>
                <div class="detail-card3">
                    <JsonFormate v-model="data.exceptionMsg"> </JsonFormate>
                </div>
            </Card>
            </Col>
        </Row>
        <Row>
            <Col :span="24">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>检查点</span>
            </div>
            <div class="detail-card4">
                <!-- 断言具体信息的table -->
                <Table class="mytable2" :loading="isFetching" :columns="assertionResultColumns"
                    :data-source="JSON.parse(data.assertionResult)?.length ? JSON.parse(data.assertionResult) : []"
                    :pagination="false">
                    <template #bodyCell="{ column, record, value }">
                        <template v-if="column.key === 'assertionState'">
                            <span :class="[record[column.key as string] === 'YES' ? 'text-green' : 'text-red']">{{
                                record[column.key as string] }}</span>
                        </template>

                        <template v-if="column.key === 'expectValue' || column.key === 'actualValue'">
                            <Popover>
                                <template #content>
                                    <Row style="width: 400px;" :gutter="12">
                                        <Col :span="11">
                                        <div>
                                            <div class="text-green text-bold">期望值：</div>
                                            <span class="custom-popover-text">{{ record['expectValue'] }}</span>
                                        </div>
                                        </Col>
                                        <Col :span="2">
                                        <div class="custom-popover-line">
                                        </div>
                                        </Col>
                                        <Col :span="11">
                                        <div>
                                            <div class="text-blue">实际值：</div>
                                            <span class="custom-popover-text">{{ record['actualValue'] }}</span>
                                        </div>
                                        </Col>
                                    </Row>
                                </template>
                                <div class="ant-table-cell-ellipsis">{{ record[column.key as string] }}</div>
                            </Popover>
                        </template>
                    </template>
                </Table>
            </div>
            </Col>
        </Row>
        </Col>
        <Col :span="12">
        <Row>
            <Col :span="24">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>SQL返回的数据
                </span>
            </div>
            <Card>
                <div class="detail-card6" style="height: 555px;">
                    <JsonFormate v-model="data.responseSqlData"> </JsonFormate>
                </div>
            </Card>
            </Col>

        </Row>
        </Col>
    </Row>
    <Row v-else-if="JSON.parse(data.stepDetail).type === 'API' || data.type === 'API'"
        :gutter="24" class="expand-box">
        <Col :span="12">
        <Row>
            <Col :span="24">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>请求地址</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.completePath }}
                </div>
            </Card>
            </Col>
        </Row>
        <Row :gutter="24">
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>请求头</span>
            </div>
            <Card>
                <div class="detail-card2">
                    <JsonFormate v-model="data.requestHeader"> </JsonFormate>
                </div>
            </Card>
            </Col>
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>请求体</span>
            </div>
            <Card>
                <div class="detail-card3">
                    <JsonFormate v-model="data.requestBody"> </JsonFormate>
                </div>
            </Card>
            </Col>
        </Row>
        <Row>
            <Col :span="24">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>检查点</span>
            </div>
            <div class="detail-card4">
                <!-- 断言具体信息的table -->
                <Table class="mytable2" :loading="isFetching" :columns="assertionResultColumns"
                    :data-source="JSON.parse(data.assertionResult)?.length ? JSON.parse(data.assertionResult) : []"
                    :pagination="false">
                    <template #bodyCell="{ column, record, value }">
                        <template v-if="column.key === 'assertionState'">
                            <span :class="[record[column.key as string] === 'YES' ? 'text-green' : 'text-red']">{{
                                record[column.key as string] }}</span>
                        </template>

                        <template v-if="column.key === 'expectValue' || column.key === 'actualValue'">
                            <Popover>
                                <template #content>
                                    <Row style="width: 400px;" :gutter="12">
                                        <Col :span="11">
                                        <div>
                                            <div class="text-green text-bold">期望值：</div>
                                            <span class="custom-popover-text">{{ record['expectValue'] }}</span>
                                        </div>
                                        </Col>
                                        <Col :span="2">
                                        <div class="custom-popover-line">
                                        </div>
                                        </Col>
                                        <Col :span="11">
                                        <div>
                                            <div class="text-blue">实际值：</div>
                                            <span class="custom-popover-text">{{ record['actualValue'] }}</span>
                                        </div>
                                        </Col>
                                    </Row>
                                </template>
                                <div class="ant-table-cell-ellipsis">{{ record[column.key as string] }}</div>
                            </Popover>
                        </template>
                    </template>
                </Table>
            </div>
            </Col>
        </Row>
        </Col>
        <Col :span="12">
        <Row>
            <Col :span="24">
            <Row :gutter="24">
                <Col :span="12">
                <div flex items-center m-y-4>
                    <div class="line"></div>
                    <span m-l-2>响应头
                    </span>
                </div>
                <Card>
                    <div class="detail-card6">
                        <JsonFormate v-model="data.responseHeader"> </JsonFormate>
                    </div>
                </Card>
                </Col>
                <Col :span="12">
                <div flex items-center m-y-4>
                    <div class="line"></div>
                    <span m-l-2>错误信息</span>
                </div>
                <Card>
                    <div class="detail-card6">
                        <JsonFormate v-model="data.exceptionMsg"> </JsonFormate>
                    </div>
                </Card>
                </Col>
            </Row>
            </Col>
            <Col :span="24">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>响应体
                </span>
            </div>
            <Card>
                <div class="detail-card6">
                    <JsonFormate v-model="data.responseBody"> </JsonFormate>
                </div>
            </Card>
            </Col>
        </Row>
        </Col>
    </Row>

    <Row v-if="JSON.parse(data.stepDetail).type === 'UI' || data.type === 'UI'" :gutter="24"
        class="expand-box">
        <Col :span="12">
        <Row :gutter="24">
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>步骤名称</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.name }}
                </div>
            </Card>
            </Col>
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>操作类型</span>
            </div>
            <Card>
                <div class="detail-card flex">
                    {{ data.operationType }}<div v-if="data?.operationName" m-x-2>({{ data.operationName }})</div>
                </div>
            </Card>
            </Col>
        </Row>
        <Row :gutter="24">
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>等待时间</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.elementWait }}
                </div>
            </Card>
            </Col>
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>参数值</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.value }}
                </div>
            </Card>
            </Col>
        </Row>
        <Row :gutter="24">
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>定位方式</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.locationType }}
                </div>
            </Card>
            </Col>
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>定位表达式</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.locationExpress }}
                </div>
            </Card>
            </Col>
        </Row>
        <Row :gutter="24">
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>目标元素定位方式</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.targetLocationType }}
                </div>
            </Card>
            </Col>
            <Col :span="12">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>目标元素定位表达式</span>
            </div>
            <Card>
                <div class="detail-card">
                    {{ data.targetLocationExpress }}
                </div>
            </Card>
            </Col>
        </Row>

        </Col>
        <Col :span="12">
        <Row>
            <Col :span="24">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>错误信息</span>
            </div>
            <Card>
                <div class="detail-card7">
                    <JsonFormate v-model="data.exceptionMsg"> </JsonFormate>
                </div>
            </Card>
            </Col>

            <Col :span="24">
            <div flex items-center m-y-4>
                <div class="line"></div>
                <span m-l-2>检查点</span>
            </div>
            <div class="detail-card4">
                <!-- 断言具体信息的table -->
                <Table class="mytable2" :loading="isFetching" :columns="assertionResultColumns"
                    :data-source="JSON.parse(data.assertionResult)?.length ? JSON.parse(data.assertionResult) : []"
                    :pagination="false">
                    <template #bodyCell="{ column, record, value }">
                        <template v-if="column.key === 'assertionState'">
                            <span :class="[record[column.key as string] === 'YES' ? 'text-green' : 'text-red']">{{
                                record[column.key as string] }}</span>
                        </template>

                        <template v-if="column.key === 'expectValue' || column.key === 'actualValue'">
                            <Popover>
                                <template #content>
                                    <Row style="width: 400px;" :gutter="12">
                                        <Col :span="11">
                                        <div>
                                            <div class="text-green text-bold">期望值：</div>
                                            <span class="custom-popover-text">{{ record['expectValue'] }}</span>
                                        </div>
                                        </Col>
                                        <Col :span="2">
                                        <div class="custom-popover-line">
                                        </div>
                                        </Col>
                                        <Col :span="11">
                                        <div>
                                            <div class="text-blue">实际值：</div>
                                            <span class="custom-popover-text">{{ record['actualValue'] }}</span>
                                        </div>
                                        </Col>
                                    </Row>
                                </template>
                                <div class="ant-table-cell-ellipsis">{{ record[column.key as string] }}</div>
                            </Popover>
                        </template>
                    </template>
                </Table>
            </div>
            </Col>

        </Row>
        </Col>
    </Row>
</template>

<script setup lang="ts">
import { Row, Col, Table, Popover, Card } from 'ant-design-vue'
import JsonFormate from '../JsonFormate.vue';
defineProps({
    data: {
        type: Object,
        default: {}
    },
    pageConfig: {
        type: Object,
        default: {}
    }
})


const assertionResultColumns = [
    {
        title: '校验方式',
        dataIndex: 'assertionAction',
        key: 'assertionAction',
        width: 100,
    },
    {
        title: '断言参数来源',
        dataIndex: 'assertionField',
        key: 'assertionField',
        width: 100,
    },
    {
        title: '断言结果',
        dataIndex: 'assertionState',
        key: 'assertionState',
        width: 100,
    },
    {
        title: '期望值',
        dataIndex: 'expectValue',
        key: 'expectValue',
        width: 100,
        ellipsis: true
    },
    {
        title: '实际值',
        dataIndex: 'actualValue',
        key: 'actualValue',
        width: 100,
        ellipsis: true
    },

    // {
    //   title: '断言类型',
    //   dataIndex: 'assertionType',
    //   key: 'assertionType',
    //   width: 100,
    // },


]

</script>

<style scoped>
.expand-box :deep(.ant-card-body) {
    padding: 0 !important;
}

.line {
    width: 2px;
    height: 15px;
    background: #90AFFF;
}

.detail-card {
    height: 60px;
}

.detail-card2,
.detail-card3 {
    height: 200px;

}

.detail-card4,
.detail-card5 {
    height: 300px;
}

.detail-card6 {
    height: 312.5px;
}

.detail-card7 {
    height: 175px;
}


.detail-card,
.detail-card2,
.detail-card3,
.detail-card4,
.detail-card5,
.detail-card6,
.detail-card7 {
    overflow: hidden;
    overflow-y: auto;
    color: var(--tabs-color);
    padding: 8px 10px !important;
}

/* 自定义滚动条整体样式 */
::-webkit-scrollbar {
    display: none;
}

.custom-popover-line {
    width: 1px;
    height: 100%;
    border-left: 1px solid var(--popover-color)
}

.ant-card-bordered {
    border: none;
}
</style>